<!--
 * @Author: 橘子
 * @Date: 2023-03-13 9:40
 * @Project_description: 项目介绍
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <div class='remark'>
    <el-popover
      v-if='!isRichText'
      :content='currentValue'
      :placement='placement'
      :title='title'
      :trigger='trigger' :width='width'>
      <span slot='reference'>{{ currentValue|ellipsis }}</span>
    </el-popover>
    <el-popover
      v-if='isRichText'
      :placement='placement'
      :title='title'
      :trigger='trigger'
      :width='width'>
      <!--      富文本解析-->
      <p class='rich-text' v-html='currentValue'></p>
      <span slot='reference'>{{ content|ellipsis }}</span>
    </el-popover>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
// import引入的组件需要注入到对象中才能使用
export default {
  name: 'y-remark',
  props: {
    //内容
    value: {
      type: String,
      required: false,
      default: '',
    },
    //	触发方式 click/focus/hover/manual
    trigger: {
      type: String,
      default: 'hover',
    },
    //出现位置  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
    placement: {
      type: String,
      default: 'top',
    },
    //标题 不需要
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 200,
    },
  },
  components: {},
  data() {
    // 这里存放数据
    return {
      currentValue: '',
      //是否富文本
      isRichText: false,
      //处理后的内容
      content: '',
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    value(value) {
      this.currentValue = value
      this.isRichTextFun(this.value)
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.currentValue = this.value
    this.isRichTextFun(this.value)
  },
  // 方法集合
  methods: {
    //判断当前内容是否为富文本,不一定只有p可能还是div包裹？
    isRichTextFun() {

      if (this.currentValue && this.currentValue.indexOf('<p>') != -1) {
        this.isRichText = true
        this.content = this.removeHtmlTag(cloneDeep(this.currentValue))
      } else {
        this.isRichText = false
      }
    },
    //如果是富文本删除标签和图片
    removeHtmlTag(str) {
      str = str.replace(/<\/?[^>]*>/g, '') //去除HTML tag
      str = str.replace(/[ | ]*\n/g, '\n') //去除行尾空白
      str = str.replace(/\n[\s| | ]*\r/g, '\n') //去除多余空行
      str = str.replace(/&nbsp;/gi, '') //去掉&nbsp;
      return str
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
//处理富文本中的图片
::v-deep .rich-text img {
  max-width: 100%;
}
</style>
